<template>
  <div class="demo-title">image/demo3</div>
  <div class="demo">
    <div class="demo-item">
      <Image :src="imgSrc" width="100px" height="100px" show-loading />
      <p class="demo-item-text">默认</p>
    </div>
    <div class="demo-item">
      <Image :src="imgSrc" width="100px" height="100px" show-loading custom-loading>
        <template #loading>
          <div class="custom-loading-tip">自定义加载中</div>
        </template>
      </Image>
      <p class="demo-item-text">自定义</p>
    </div>
    <!-- 此处内部使用，无需复制 start -->
    <div class="none">
      <div class="none-item">
        <img class="none-item-img" src="https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/image/loading.png" />
      </div>
      <div class="none-item">
        <div class="none-item-text">自定义加载中</div>
      </div>
    </div>
    <!-- 此处内部使用，无需复制 end -->
  </div>
</template>

<script lang="ts" setup>
  import Image from '@sscd-mobile/image'
  const imgSrc = 'https://mylsiic-1311112663.cos.ap-guangzhou.myqcloud.com/mp-weixin/meeting/index/introduceDetail/bg-7.png'
</script>

<style lang="less" scoped>
  .demo {
    position: relative;
    padding: 12px;
    background: #fff;
    display: flex;
    > .demo-item {
      width: 100px;
      height: 130px;
      margin-right: 12px;
      > .demo-item-text {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
    .custom-loading-tip {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .none {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 100%;
    height: 100px;
    display: flex;
    background: #fff;
    > .none-item {
      width: 100px;
      height: 100px;
      margin-right: 12px;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      > .none-item-img {
        width: 20px;
        height: 20px;
        animation: none-rotate 1s linear infinite;
      }
      > .none-item-text {
        color: #fff;
      }
    }
  }
  @keyframes none-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>